<template>
	<view class="heand">
		<navigator url="../search/search" class="indexheader">
			<image class="sosouicon" src="../../static/img/sousuo .png"></image>
			<input class="hinput" placeholder="裝自配电箱"></input>
		</navigator>
		<view class="border" @click="dropdown">
			<view v-model="itemList">{{itemList1}}</view>
			<image class="size" src="../../static/img/xiala.png"></image>
		</view>
		<view class="level">
			<p>一级设备</p>
		</view>
		<navigator url="../firstequipment/firstequipment" class="content" v-for="(item,index) in one" :key="index" v-if="index<1">
			<view class="xinxi">
				<image class="imgsize" :src="img"></image>
				<view class="text">
					<view class="shulian1">总数量：
					  <text>{{item.count}}</text>
					</view>
					<view class="shulian2">未巡查数量：
					  <text>{{item.nocheck}}</text>
					</view>
					<view class="shulian3">已巡查数量：
					  <text>{{item.checked}}</text>
					</view>
				</view>
				<view class="text1">
					<view class="tubiao1"></view>
					<view class="normal">正常</view>
					<view class="number">{{item.normal}}</view>
					<view class="tubiao3"></view>
				    <view class="abnormal">异常</view>
                    <view class="number">{{item.abnormal}}</view>
					<view class="tubiao5"></view>
				    <view class="fault">故障</view>
					<view class="number">{{item.fault}}</view>
				</view>
			</view>
		</navigator>
		<view class="level">
			<p>二级设备</p>
		</view>
		<navigator url="../secondequipment/secondequipment" class="content" v-for="(item,index) in two" :key="index" v-if="index<1">
			<view class="xinxi">
				<image class="imgsize" :src="img2"></image>
				<view class="text">
					<view class="shulian1">总数量：
					  <text>{{item.count}}</text>
					</view>
					<view class="shulian2">未巡查数量：
					  <text>{{item.nocheck}}</text>
					</view>
					<view class="shulian3">已巡查数量：
					  <text>{{item.checked}}</text>
					</view>
				</view>
				<view class="text1">
					<view class="tubiao1"></view>
					<view class="normal">正常</view>
					<view class="number">{{item.normal}}</view>
					<view class="tubiao3"></view>
				    <view class="abnormal">异常</view>
		            <view class="number">{{item.abnormal}}</view>
					<view class="tubiao5"></view>
				    <view class="fault">故障</view>
					<view class="number">{{item.fault}}</view>
				</view>
			</view>
		</navigator>
		<view class="level">
			<p>三级设备</p>
		</view>
		<navigator url="../threeequipment/threeequipment" class="content" v-for="(item,index) in three" :key="index" v-if="index<1">
			<view class="xinxi">
				<image class="imgsize" :src="img3"></image>
				<view class="text">
					<view class="shulian1">总数量：
					  <text>{{item.count}}</text>
					</view>
					<view class="shulian2">未巡查数量：
					  <text>{{item.nocheck}}</text>
					</view>
					<view class="shulian3">已巡查数量：
					  <text>{{item.checked}}</text>
					</view>
				</view>
				<view class="text1">
					<view class="tubiao1"></view>
					<view class="normal">正常</view>
					<view class="number">{{item.normal}}</view>
					<view class="tubiao3"></view>
				    <view class="abnormal">异常</view>
		            <view class="number">{{item.abnormal}}</view>
					<view class="tubiao5"></view>
				    <view class="fault">故障</view>
					<view class="number">{{item.fault}}</view>
				</view>
			</view>
		</navigator>
	</view>
</template>


<script>
    export default {
		data() {
			return {
			nickname1:'',
			nickname2:'',
			nickname3:'',
			nickname4:'',
			nickname5:'',
			itemList:'',
			itemList1:'中国中铁广州地铁项目——7号线',
			img:'',
			one:'',
			two:'',
			three:'',
			img2:'',
			img3:'',
			admin_id:21,
			admin_id1:'',
			admin_id2:'',
			admin_id3:'',
			admin_id4:'',
			admin_id5:'',
			getStorageSync:''
			};
		},
		methods: {
		    showActionSheet1: function () {
		    		uni.showActionSheet({
		    		itemList: ['全部','一级设备', '二级设备', '三级设备'],
		    		success: function (res) {
		    			console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
		    		},
		    		fail: function (res) {
		    			console.log(res.errMsg);
		    		}
		    	})
		    },
			getData () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/app/index', 
					data: {
						admin_id:this.admin_id,
					},
					 method: "POST",
					success: (res) => {
						this.img = res.data.data.one.img.img;
						this.img2 = res.data.data.two.img.img;
						this.img3 = res.data.data.three.img.img;
						this.one = res.data.data.one;
						this.two = res.data.data.two;
						this.three = res.data.data.three;
					},
					fail:() => {
						uni.showToast({
							icon:'none',
							title:'请连接网络'
						})
					}
				})
			},
			dropdown () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/app/projectList', 
					 method: "POST",
					success: (ret) => {
						this.admin_id1 = ret.data.data[0].id;
						this.admin_id2 = ret.data.data[1].id;
						this.admin_id3 = ret.data.data[2].id;
						this.admin_id4 = ret.data.data[3].id;
						this.admin_id5 = ret.data.data[4].id;
						this.nickname1 = ret.data.data[0].nickname;
						this.nickname2 = ret.data.data[1].nickname;
						this.nickname3 = ret.data.data[2].nickname;
						this.nickname4 = ret.data.data[3].nickname;
						this.nickname5 = ret.data.data[4].nickname;
						uni.showActionSheet({
							itemList:[this.nickname1,this.nickname2,this.nickname3,this.nickname4,this.nickname5],
							success:(ret)=> {
								if (ret.tapIndex == 0){
									console.log('22222',this.admin_id);
									this.itemList1 = this.nickname1;
									this.admin_id =  this.admin_id1;
									this.getData()
								} else if (ret.tapIndex == 1) {
									console.log('22222',this.admin_id);
									this.itemList1 = this.nickname2;
									this.admin_id =  this.admin_id2;
									this.getData()
								} else if (ret.tapIndex == 2) {
									console.log('22222',this.admin_id);
									this.itemList1 = this.nickname3;
									this.admin_id =  this.admin_id3;
									this.getData()
								}
								 else if (ret.tapIndex == 3) {
									 console.log('22222',this.admin_id);
									this.itemList1 = this.nickname4;
									this.admin_id =  this.admin_id4;
									this.getData()
								}else if (ret.tapIndex == 4) {
									console.log('22222',this.admin_id);
									this.itemList1 = this.nickname5;
									this.admin_id =  this.admin_id5;
									this.getData()
								}
							}
						})
					}
				})
			}
		},
		onLoad () {
			this.getData()
		}
    }
</script>

<style>
	text {
		color: #3C6DD2;
		font-size: 28upx;
	}
    .heand {
		background-color: #3C6DD2;
		width: 100%;
		height: 118upx;
	}
	.imgsize {
		width: 100%;
		height: 350upx;
		border-radius: 20upx;
	}
	.indexheader {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
	}
	.hinput {
		background-color: #FFFFFF;
		width: 95%;
		border-radius: 10upx;
		/* padding-left: 58upx; */
		position: absolute;
		text-align: center;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70upx;
	}
	.sosouicon {
		width: 30upx;
		height: 30upx;
		z-index: 9999;
		margin-right: 188upx;
	}
	.border {
		border: 2upx solid #999999;
		border-radius: 6upx;
		background-color: #FFFFFF;
		margin-top: 35upx;
		margin-left: 3%;
		width: 75%;
		padding: 17upx;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 30upx;
	}
	.size {
		width: 20upx;
		height: 20upx;
		transform: rotate(180deg);
		margin-left: 78upx;
	}
	.level {
		margin-top: 35upx;
		margin-left: 3%;
		border-left: 8upx solid #3C6DD2;
		padding-left: 18upx;
	    font-weight: bold;
		color: #333333;
	}
	.xinxi {
		padding: 10upx;
	}
	.text {
		font-size: 26upx;
		display: flex;
	}
	.text1 {
		font-size: 20upx;
		display: flex;
	}
	.shulian1 {
		width: 27%;
		font-size: 32upx;
		padding: 10upx;
		color: #333333;
	}
	.shulian2 {
		width: 37%;
		font-size: 32upx;
		padding: 10upx;
		color: #333333;
	}
	.shulian3 {
		width: 37%;
		font-size: 32upx;
		padding: 10upx;
		color: #333333;
	}
	.normal {
		color: #2EC13C;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.abnormal {
		color: #FFD200;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.fault {
		color: #FD0006;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.number {
		font-size: 22upx;
		margin-right: 50upx;
		display: flex;
		align-items: center;
	}
	.tubiao1 {
		background-color: #2EC13C;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #C0ECC4;
	}
	.tubiao3 {
		background-color: #FFD200;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FFF1B2;
	}
	.tubiao5 {
		background-color: #FD0006;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FEB2B4;
	}
</style>
